<template>
	<scroll-view
		scroll-with-animation
		:style="{ backgroundColor: bgColor }"
		:class="['sunui-nav-bar', isCenter ? 'sunui-nav-center' : '']"
		:scroll-x="true"
		:enhanced="true"
		:show-scrollbar="false"
		:scroll-into-view="'tab-' + currentIndex"
	>
		<view
			class="nav-item"
			:id="'tab-' + index"
			:style="{ width: size < 1 ? 'auto' : size + 'rpx', margin: margin + 'rpx', padding: '0rpx ' + padding }"
			v-for="(item, index) in result"
			:key="index"
			@click="navchang($event, item)"
			:data-index="index"
		>
			<view
				:class="['nav-item-title', currentIndex == index ? 'nav-active' : '']"
				:style="{
					color: currentIndex == index ? activeColor : color,
					textAlign: textAlign,
					lineHeight: lineHeight,
					fontSize: currentIndex == index ? activeFontSize : fontSize,
					fontWeight: currentIndex == index ? activeFontWeight : ''
				}"
			>
				{{ item.name }}
			</view>
			<view class="nav-active-line-wrap" :style="{ justifyContent: activeDirection }">
				<view
					class="nav-active-line"
					:class="[currentIndex == index && animatie ? 'sunui-nav-scale' : '']"
					:style="{ background: activeLineBg, width: activeLineWidth, height: activeLineHeight, borderRadius: activeLineRadius }"
					v-if="currentIndex == index"
				></view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
export default {
	data() {
		return {
			result: []
		};
	},
	created() {
		let result = [];
		for (let item of this.items) {
			let { [this.keyId]: id, [this.keyName]: name } = item;
			result.push({
				id,
				name
			});
		}
		this.result = result;
	},
	props: {
		keyId: {
			type: String,
			default: 'id'
		},
		keyName: {
			type: String,
			default: 'name'
		},
		isCenter: { type: Boolean, default: false },
		currentIndex: { type: Number, default: 0 },
		size: { type: Number, default: 120 },
		fontSize: { type: String, default: '28rpx' },
		activeFontSize: { type: String, default: '28rpx' },
		items: {
			type: Array,
			default: function() {
				return [];
			}
		},
		activeLineBg: { type: String, default: 'linear-gradient(to right, #66BFFF,#3388FF)' },
		color: { type: String, default: '#333333' },
		activeColor: { type: String, default: '#333333' },
		activeLineHeight: { type: String, default: '6rpx' },
		activeLineWidth: { type: String, default: '36rpx' },
		activeLineRadius: { type: String, default: '0rpx' },
		activeDirection: { type: String, default: 'center' },
		activeFontWeight: { type: Number, default: 700 },
		margin: { type: Number, default: 0 },
		textAlign: { type: String, default: '' },
		lineHeight: { type: String, default: '50rpx' },
		padding: { type: String, default: '0rpx' },
		animatie: { type: Boolean, default: true },
		autoLeft: { type: String, default: '' },
		bgColor: { type: String, default: '#fff' }
	},
	methods: {
		// 修改新增item，获取id和name
		navchang: function(e, item) {
			this.$emit('change', Number(e.currentTarget.dataset.index), item.id);
		}
	}
};
</script>
<style scoped>
/* 隐藏“导航栏”滚动条 */
scroll-view ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}
/* .sunui-nav-center > .uni-scroll-view {
	overflow: hidden !important;
} */
/* .sunui-nav-bar .uni-scroll-view .uni-scroll-view-content {
	overflow: hidden !important;
} */
/* #ifndef MP-ALIPAY */
.sunui-nav-bar {
	width: 100%;
	display: flex;
	white-space: nowrap;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.sunui-nav-bar {
	width: 100%;
	white-space: nowrap;
}
/* #endif */
.nav-item {
	width: 100rpx;
	display: inline-flex;
	flex-direction: column;
}
.nav-item-title {
	width: 100%;
	color: #333333;
}
.nav-active {
}
.nav-active-line-wrap {
	display: flex;
}
.nav-active-line {
	margin-top: 5rpx;
}
.sunui-nav-center {
	justify-content: center;
	text-align: center;
}
@keyframes sunui-nav-scale {
	0% {
		transform: scale(0.1);
	}
	100% {
		transform: scale(1);
	}
}
.sunui-nav-scale {
	animation: sunui-nav-scale 300ms forwards;
}
</style>
